<template>
  <view class="">
    <!-- <view class="uni-page-head" v-if="titleFlag">
      <image class="common-title-img" style="left: 20rpx;" :src="require('../../static/imges/fanhui.png')" @click="back()" />
      <view class="uni-page-head-title">
        退库单列表
      </view>
    </view>
    <view v-if="titleFlag" style="margin-top: 98rpx;" /> -->
    <view class="swiper-item">
      <scroll-view scroll-y style="height: 700px;width: 100%;" @scrolltolower="reachBottom">
        <view class="page-box" style="margin-bottom: 60px;">
          <view class="order" v-for="(item, index) in prjInfo" :key="item.retreatDetailId">
            <view class="">
              <view class="top">
                <view class="left">
                  <u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
                  <text :selectable="true" style="margin: 0 5rpx 0 10rpx;color: #000;font-weight:bold">{{ item.categoryName }}</text>
                  <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
                </view>
                <view class="right">
                  <view v-if="item.retreatState === '0' && item.pmsRetreat === '31' && item.isPush === '1'" class="right-title" @click="chexiaotuiku(item.retreatDetailId)">
                    撤销退库
                  </view>
                </view>
              </view>
              <view class="item">
                <view class="content">
                  <text :selectable="true" class="title u-line-2">退库申请单号：{{ item.retreatDetailId }}</text>
                  <view class="type">站址编码：{{ item.siteId }}</view>
                  <view class="type">退库状态：{{ item.retreatStateName }}</view>
                  <view style="display: flex;">
                    <view class="type" style="flex: 1">退库数量：{{ item.retreatAmount }}</view>
                    <view class="type" style="flex: 1">计量单位：{{ item.unit }}</view>
                  </view>
                  <view style="display: flex">
                    <view class="type" style="flex: 1">
                      推送仓储状态：{{ isPushEnum[item.isPush] }}
                    </view>
                    <view class="type" style="flex: 1">退库类别：{{ item.pmsRetreatType }}</view>
                  </view>
                  <view class="type">退库申请时间：{{ item.createTime }}</view>
                </view>
              </view>
            </view>
          </view>
          <!-- 提示 -->
          <view style="width: 100%;padding: 10rpx 0;text-align: center;background-color:#00000008; color:#737373 ;margin: 15rpx 0;">
              ---没有更多了---
          </view>
        </view>


      </scroll-view>
    </view>

  </view>
</template>

<script>
import talkingdata from '../../common/talkingdata.js';
// import imp from "../js/imp";

export default {
  data() {
    return {
      type: '', // 区分单站、批量、整体类型
      bundingId: '', // 绑定id
      osDetailId: '', // 整体
      searchValue: '',
      show: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,

      loadStatus: ['loadmore', 'nomore', 'loadmore', 'loadmore'],
      prjInfo: [],
      border: true,
      mask: true, // 是否显示遮罩

      xiangmubianhao: '',
      zhanzhibianma: '',
      xiangmumingcheng: '',
      xiangmunianfen: '',
      xiangmujieduan: '',
      xiangmuleibie: '',
      prjStage: '',
      prjType: '',
      pageIndex: 0,
      titleFlag: true,
      xingMuNianFenList: [
        '2015',
        '2016',
        '2017',
        '2018',
        '2019',
        '2020',
        '2021',
      ],
      // 推送仓储状态
      isPushEnum: {
        '0': '未推送',
        '1': '已推送',
        '2': '推送失败'
      },
      ic_syl: {
        color: '#EB4B4B'
      },
    }
  },
  onLoad(option) {
    console.log(option, 'option--eee')
    this.bundingId = option.bundingId
    this.osDetailId = option.osDetailId
    this.type = option.type
    console.log("==" + this.bundingId)
    //判断新老MOA用来显示导航栏
    if (uni.getStorageSync('moaType') == "0") {
      this.titleFlag = false
    }
  },
  onShow() {
    this.getList();
  },
  onPullDownRefresh() {
    this.getList()
  },
  onReady() {
    console.log("执行onReady")
    // let menus = [];
    // imp.iWindow.setMenus(menus);
    //在页面挂载完成后，调用外部埋点，统计数据
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = talkingdata.talkingKey;
    document.body.appendChild(script);

  },
  methods: {
    back() {
      uni.navigateBack({
        delta: 1
      });
    },
    reachBottom() {
      // 此tab为空数据
      console.log("11")
      // this.pageIndex++
      // setTimeout(() => {
      // 	this.getList();
      // }, 300);

    },
    /**
     * @author: MrLiu
     * @time: 2021-09-15
     * @Title: 获取项目列表
     */
    getList() {
      console.log("出发" + this.bundingId)
      const params = {
        bundingId: this.bundingId ?? '',
        osDetailId: this.osDetailId ?? ''
      }
      const urlP = this.type === '3' ? '/material/api/retreat/queryRetreatEquipListWhole' : '/material/api/retreat/queryRetreatEquipList'
      this.$axios.post(urlP, params).then(res => {
        if (res?.data?.length) {
          this.prjInfo = res.data
        } else {
          this.prjInfo = []
          uni.showModal({
                title: '温馨提示',
                content: "没有更多数据!",
                showCancel: false,
                confirmColor:'#eb4b4b',
              })
          }
      })

    },
    // 撤销退库
    chexiaotuiku(retreatDetailId) {
      uni.showModal({
        title: '温馨提示',
        content: "是否撤销退库",
        confirmColor:'#eb4b4b',
        success: (res) => {
          if (res.confirm) {
            this.$axios.post('/material/api/retreat/cancelRetreatApply', { retreatDetailId }).then(() => {
              uni.showModal({
								title: "温馨提示",
								content: "撤销退库成功",
                confirmColor:'#eb4b4b',
								showCancel: false,
								success: () => {
									this.getList()
								}
							});
            })
          }
        }
      });
    },
    // 点击搜索项目类别的回调
    actionSheetCallback(index) {
      console.log(index)
      this.show3 = false
      this.xiangmuleibie = this.xingMuLeiBieList[index].name;
      this.prjType = this.xingMuLeiBieList[index].code;
    },
    //点击项目阶段的回调
    xiangMuJieDuanCallback(index) {
      console.log(index)
      this.show4 = false
      this.xiangmujieduan = this.xingMuJieDuanList[index].name;
      this.prjStage = this.xingMuJieDuanList[index].code;
    },
    //点击项目年份的回调
    xiangMuNianFenCallback(index) {
      console.log(index)
      this.show5 = false
      this.xiangmunianfen = this.xingMuNianFenList[index];
    },


  },
}
</script>
<style lang="scss" scoped>
@import '@/common/common-ui.css';

.u-search-box {
  padding: 18rpx 30rpx;
  background-color: #FFFFFF;
  display: flex;

}

.u-search-inner {
  background-color: rgb(234, 234, 234);

  width: 70%;
  border-radius: 100rpx;
  display: flex;
  align-items: center;
  padding: 0rpx 16rpx;
}

.u-search-text {
  //height: 35px;
  font-size: 26rpx;
  color: $u-tips-color;
  margin-left: 10rpx;
}

.l-label {
  margin-top: 5px;
  margin-left: 10px;
  color: #EB4B4B;
}

.l_count {
  display: flex;
  justify-content: space-around;
  margin-top: 8px;
}

.l_text {
  width: 80px;
  text-align: center;
}
</style>
<style scoped lang="scss">
.swiper-item {
  height: 100%;

}

.order {
  width: 95%;
  background-color: #fff;
  margin: 20rpx auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx 15rpx 20rpx 15rpx;
  overflow: auto;
  background-color: white;
  color: black;
  text-align: left;

  .top {
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .store {
        width: 90%;
        margin: 0 10rpx;
        font-size: 28rpx;
        font-weight: bold;
      }
    }

    .right {
      display: flex;
      align-items: center;

      //color: $u-type-warning-dark;
      .right-title {
        width: 140rpx;
        height: 50rpx;
        color: #eb4b4b;
        line-height: 50rpx;
        text-align: center;
        border: 1px solid #eb4b4b;
        border-radius: 10rpx;
      }
    }
  }

  .item {
    display: flex;
    margin: 20rpx 0 0 30rpx;

    .left {
      margin-right: 20rpx;

      image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 10rpx;
      }
    }

    .content {
      margin:  0;
      font-size: 27rpx;
      color: #AFAEAC;
      .title {
        font-size: 28rpx;
        line-height: 50rpx;
      }

      .type {
        margin: 10rpx 0;
        font-size: 24rpx;
        color: #AFAEAC;
      }

      .delivery-time {
        color: #e5d001;
        font-size: 24rpx;
      }
    }

    .right {

      margin-left: 10rpx;
      padding-top: 20rpx;
      text-align: right;

      .decimal {
        font-size: 24rpx;
        margin-top: 4rpx;
      }

      .number {
        color: $u-tips-color;
        font-size: 24rpx;
      }
    }
  }


}

.bss-price-title-text {
  height: 28px;
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  /* color: #FFFFFF; */
  /* color: #FFFFFF; */
  line-height: 28px;
}

.close-btn {
  // height: 100%;
  margin-top: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.selectBox {

  border: 1rpx solid #c0c4cc;
  position: absolute;
  width: 465rpx;
  z-index: 999;
  background-color: #fff;

  .selectCell {
    // border-bottom: 1rpx solid #c0c4cc;
    text-align: left;
  }
}
</style>
